<template>
  <view class="manufactors_container">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <image :src="staticUrl() + '/home/back.png'" class="back" @click="clickBack">
            <view class="seach">
              <icon type="search" size="16" class="search" />
              <input v-model="searchContent" placeholder="请输入厂家名称">
              <icon type="clear" size="14" class="clear" @click="clear" v-if="searchContent" />
            </view>
            <text @click="search">搜索</text>
        </view>
      </view>
    </view>

    <!-- 品牌 -->
    <view :style="'background:#fff;position:sticky;top:' + topBarHeight + 'px;z-index:1000'"
      v-if="allManufactorStatus">
      <scroll-view scroll-x :scroll-into-view="ids" style="width:calc(100% - 108rpx)">
        <view class="manufactors_list">
          <view v-for="(item, index) in manufactorList" :key="index" class="item"
            @click="clickItem(item)" :id="item.ids">
            <image :src="item.imageUrl" mode="aspectFit"></image>
            <text class="singleRowEllipsis" :class="id === item.id ? 'active' : ''">
              {{ item.title }}
            </text>
          </view>
        </view>
      </scroll-view>
      <view class="brand" :style="'top:' + topBarHeight + 'px;'" @click="clickBrand">
        品牌
      </view>
    </view>

    <view style="height:100vh;background:#aeaeae;overflow:hidden"
      @click="allManufactorStatus = true" v-if="!allManufactorStatus">
      <view class="title" :style="'margin-top:' + topBarHeight + 'px'">
        <text>全部品牌</text>
        <image :src="staticUrl() + '/home/close.png'" @click="allManufactorStatus = true"></image>
      </view>
      <view :style="'background:#fff;height:' + (topBarHeight + 50) + 'px'"></view>

      <view class="allManufactors">
        <view v-for="(item, index) in manufactorList" :key="index" class="item"
          @click="clickItems(item)" :id="item.ids">
          <image :src="item.imageUrl" mode="aspectFit"></image>
          <text class="singleRowEllipsis" :class="id === item.id ? 'active' : ''">
            {{ item.title }}
          </text>
        </view>
      </view>
      <view style="background:#fff;width:100%;height:50rpx;"></view>
    </view>

    <view v-if="allManufactorStatus && goodsList.length"
      :style="'margin-top:' + (topBarHeight + 10) + 'px'">
      <Goods v-for="(item, index) in goodsList" :key="index" :goodsId="item.id" :item="item">
      </Goods>
      <view style="height:20rpx"></view>
    </view>

    <view class="notDefined" v-if="allManufactorStatus && !goodsList.length">
      <image :src="staticUrl() + '/home/bg.png'"></image>
      <text>很抱歉，没有搜索到相关品牌</text>
    </view>

    <CartsIcon></CartsIcon>

  </view>
</template>

<script>
import Goods from '@/components/goods/goods.vue'
import { getDedicatedData, getSearchList } from "@/api/home/index"
import CartsIcon from '@/components/home/cartsIcon.vue'

export default {
  components: { Goods, CartsIcon },
  data () {
    return {
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      searchContent: '',
      manufactorList: [],
      manufactorList2: [],
      goodsList: [],
      id: '',
      ids: '',
      url: '',
      allManufactorStatus: true,
      pageNumber: 1,
      pageSize: 30,
      pages: 1,
    }
  },
  onLoad (val) {
    this.id = val.id
    setTimeout(() => {
      this.id = val.id
      this.ids = 'a' + val.id
    }, 250)

    this.url = val.url

    this.getList()
    this.getGoodsList()
  },
  onShow () {
    var self = this;
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = (menuButtonInfo.bottom - self.stateBarHeight) + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
      },
    })
  },
  watch: {
    "searchContent" (val) {
      if (!val) {
        this.manufactorList = this.manufactorList2
      } else {
        this.manufactorList = this.manufactorList2.filter(i => {
          return i.title.indexOf(this.searchContent) > -1
        })
        if (this.manufactorList.length) {
          this.id = this.manufactorList[0].id
          this.ids = this.manufactorList[0].ids
          this.getGoodsList()
        }
      }
    },
  },
  methods: {
    // 所有品牌 开关
    clickBrand () {
      this.allManufactorStatus = false
    },
    // 点击一行的品牌
    clickItem (val) {
      this.id = val.id
      this.ids = val.ids
      this.getGoodsList()
    },
    // 点击多行的品牌
    clickItems (val) {
      this.id = val.id
      this.ids = val.ids
      this.getGoodsList()
    },
    // 返回上一页
    clickBack () {
      uni.navigateBack({
        delta: 1
      })
    },
    // 删除搜索内容
    clear () {
      this.searchContent = ""
    },
    // 搜索
    search () {
      this.manufactorList = this.manufactorList2.filter(i => {
        return i.title.indexOf(this.searchContent) > -1
      })
      if (this.manufactorList.length) {
        this.id = this.manufactorList[0].id
        this.ids = this.manufactorList[0].ids
        this.getGoodsList()
      }
    },
    // 获取数据
    getGoodsList () {
      getSearchList({
        brandId: this.id,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
          this.pages = res.data.pages
        }
      })
    },
    // 获取品牌
    getList () {
      getDedicatedData(this.url).then(res => {
        if (res.code === 200) {
          res.data.forEach(i => {
            this.$set(i, 'id', i.id)
            this.$set(i, 'ids', 'a' + i.id)
          })
          this.manufactorList = res.data
          this.manufactorList2 = res.data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.manufactors_container {
  min-height: 100vh;
  background: #f9f9f9;

  .home_top_bg {
    .top_bgimg {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      background-size: 100%;
      color: black;
      background: #fff;
      font-size: 32rpx;
    }

    .top_cont {
      display: flex;
      align-items: center;
      padding: 20rpx;
      box-sizing: border-box;
    }

    .back {
      width: 20rpx;
      height: 36rpx;
      padding: 0 14rpx;
    }

    .seach {
      position: relative;
      /* #ifdef MP */
      width: 50%;
      /* #endif */
      /* #ifndef MP */
      width: 75%;
      /* #endif */
      height: 56rpx;
      margin-left: 20rpx;
      background: #f9f9f9;
      border-radius: 56rpx;

      .search {
        position: absolute;
        top: 28%;
        left: 18rpx;
      }

      .clear {
        position: absolute;
        top: 24%;
        right: 14rpx;
        z-index: 100;
        padding: 4rpx 15rpx 10rpx;
      }

      input {
        height: 56rpx;
        margin: 0 60rpx;
        font-size: 29rpx;
      }
    }

    text {
      font-size: 30rpx;
      height: 56rpx;
      line-height: 56rpx;
      padding: 0 20rpx;
    }
  }

  .notDefined {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    color: #8d8d8d;
    font-size: 33rpx;
    margin-top: 70%;

    image {
      width: 348.61rpx;
      height: 220.14rpx;
    }

    text {
      margin-top: 40rpx;
    }
  }

  .brand {
    width: 108rpx;
    height: 123rpx;
    line-height: 123rpx;
    text-align: center;
    color: #010101;
    background: #fff;
    font-size: 28rpx;
    position: fixed;
    right: 0;
    z-index: 1000;
    box-shadow: -10rpx 0rpx 10rpx -4rpx #dcdcdc;
  }

  .manufactors_list {
    height: 123rpx;
    display: flex;
    flex-flow: row nowrap;

    .item {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      margin-left: 14rpx;

      image {
        width: 128.47rpx;
        height: 51.39rpx;
      }

      text {
        width: 80%;
        color: #424242;
        font-size: 24rpx;
        padding: 4rpx 8.68rpx;
        margin-top: 10rpx;
        text-align: center;
      }

      .active {
        color: #2871fc;
        font-size: 24rpx;
        padding: 2rpx 8.68rpx;
        border: 2rpx solid #2871fc;
        border-radius: 48rpx;
      }
    }
  }

  .title {
    position: fixed;
    top: 0;
    width: 100%;
    height: 88rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #010101;
    background: #fff;

    text {
      margin-left: 25.69rpx;
    }

    image {
      width: 28rpx;
      height: 28rpx;
      padding: 16rpx 40rpx;
    }
  }

  .allManufactors {
    display: flex;
    flex-flow: row wrap;
    background: #fff;
    height: 33vh;
    overflow: hidden;
    overflow-y: auto;

    .item {
      width: 25%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 30rpx;

      image {
        width: 128.47rpx;
        height: 51.39rpx;
      }

      text {
        width: 80%;
        color: #424242;
        font-size: 24rpx;
        padding: 4rpx 8.68rpx;
        margin-top: 10rpx;
        text-align: center;
      }

      .active {
        color: #2871fc;
        font-size: 24rpx;
        padding: 2rpx 8.68rpx;
        border: 2rpx solid #2871fc;
        border-radius: 48rpx;
      }
    }

    // .item:last-child {
    //   margin-right: 300rpx;
    // }
  }
}
</style>